<template>
  <div class="background">
    <a-card style="margin-bottom: 10px">
      <a-row>
        <a-col :span="24">
          <a-form
            layout="inline"
            :form="form"
            @submit="handleSubmit"
          >
            <a-form-item label="单据编号">
              <a-input
                allow-clear
                style="width:180px"
                placeholder="请输入单据编号"
                v-model="billNo"
              ></a-input>
            </a-form-item>
            <a-form-item label="样衣号">
              <a-input
                allow-clear
                style="width:180px"
                placeholder="请输入样衣号"
                v-model="sampleCode"
              ></a-input>
            </a-form-item>
            <a-form-item label="大货号">
              <a-input
                allow-clear
                style="width:180px"
                placeholder="请输入大货号"
                v-model="designName"
              ></a-input>
            </a-form-item>
            <a-form-item label="上货季">
              <!-- <a-input
                allow-clear
                style="width:180px"
                placeholder="请输入上货季"
                v-model="scseason"
              ></a-input> -->
              <a-select
                style="width: 180px"
                 show-search
                placeholder="请选择上货季"
                v-model="scseason"
                allow-clear
              >
                <a-select-option
                  :value="item.name"
                  v-for="(item,index) in seasonList"
                  :key="index"
                >
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="品牌">
              <a-select
                show-search
                style="width: 180px"
                placeholder="请选择品牌"
                v-model="brandName"
                @change="changeBrand"
                allow-clear
              >
                <a-select-option
                  :value="item.name"
                  v-for="(item,index) in brandList"
                  :key="index"
                >
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="小类">
              <a-select
                show-search
                style="width: 180px"
                placeholder="请选择小类"
                v-model="xlName"
                @change="changeXl"
                allow-clear
              >
                <a-select-option
                  :value="item.name"
                  v-for="(item,index) in xlList"
                  :key="index"
                >
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item>
              <a-button
                type="primary"
                html-type="submit"
              >搜索</a-button>
              <a-button
                type="primary"
                style="margin-left: 10px"
                @click="add('')"
                v-if="ifShowButton"
              >新建</a-button>
            </a-form-item>
          </a-form>
        </a-col>
      </a-row>
    </a-card>
    <a-card class="table">
      <a-table
      :scroll="{x: 1500}"
        :loading="loading"
        :columns="columns"
        :data-source="dataSource"
        :pagination="pagination"
        @change="handleTableChange"
        row-key="record => record.id"
        :row-class-name="record => record.status==1 ? 'table-color': ''"
      >
        <template
          slot="craftRelationDec"
          slot-scope="txt, record"
        >
          <a-tag
            v-for="(item,index) in record.craftRelationDec"
            :key="index"
            :color="'blue'"
            style="margin-bottom:5px"
          >
            {{item}}
          </a-tag>

        </template>
        <template
          slot="action"
          slot-scope="txt, record"
        >
          <a
            v-if="record.status == 0 && ifShowButton"
            class="mr-10"
            @click="add(record)"
          >
            <a-icon type="edit" />编辑
          </a>
          <a
            v-if="record.status == 0 && ifShowButton"
            class="mr-10"
            @click="getDetail(record)"
          >
            <a-icon type="sync" />提交
          </a>
          <a
            v-if="record.status == 1"
            class="mr-10"
            @click="todetail(record)"
          >
            <a-icon type="sync" />查看
          </a>
          <a
            v-if="record.status == 1 && ifShowButton"
            class="mr-10"
            @click="backsubmit(record)"
          >
            <a-icon type="sync" />反提交
          </a>
          <!-- <a
            class="mr-10"
            @click="toTem(record)"
          >
          <a-icon type="sync" />转工艺模板
          </a> -->
          <!-- <a-popconfirm
            v-if="record.status == 0 && ifShowButton"
            :title="`确定要删除该项吗?`"
            @confirm="deleteRecord(record)"
          >
            <a class="mr-10">
              <a-icon type="delete" />删除
            </a>
          </a-popconfirm> -->
          <!-- <a
            class="mr-10"
            @click="tosize(record)"
          >
            <a-icon type="code" />工艺尺寸
          </a> -->
          <a
            class="mr-10"
            @click="print(record)"
          >
            <a-icon type="code" />打印
          </a>
        </template>

      </a-table>
      <create
        v-if="showAdd"
        :content="content"
        @close="close"
      ></create>
       <detail
        v-if="showDetail"
        :content="content"
        @closeDetail="closeDetail"
      ></detail>
       <printInfo
        v-if="showPrint"
        :id="id"
        @closePrint="closePrint"
      ></printInfo>
    </a-card>
  </div>
</template>

<script>
import create from './create.vue'
import detail from './detail.vue'
import printInfo from './print.vue'

import { getList, deleteList, getDictChildList, changeStatus, getDetailList } from '@api/rd/index'
const columns = [
  {
    title: '工艺单号',
    width: 170,
    dataIndex: 'code'
  },
  {
    title: '单据编号',
    width: 140,
    dataIndex: 'billNo'
  },
  {
    title: '上货季',
    width: 100,
    dataIndex: 'scseason'
  },
  {
    width: 100,
    title: '品牌',
    dataIndex: 'brand'
  },
  {
    title: '小类',
    width: 90,
    dataIndex: 'xl'
  },
  {
    title: '样衣号',
    width: 130,
    dataIndex: 'sampleCode'
  },
  {
    title: '大货号',
    width: 120,
    dataIndex: 'designName'
  },
  {
    width: 140,
    title: '品名',
    dataIndex: 'sampleName'
  },
  {
    title: '版次',
    width: 100,
    dataIndex: 'bc'
  },
  {
    title: '颜色',
    width: 120,
    dataIndex: 'stycolorid'
  },
  {
    title: '工艺师',
    width: 80,
    dataIndex: 'statusUser'
  },
  {
    title: '操作',
    width: 200,
    scopedSlots: { customRender: 'action' },
     fixed: 'right',
      align: 'center',
  }
]
export default {
  components: {
    create,
    detail,
    printInfo
  },
  data() {
    return {
      columns,
      id:'',
      showAdd: false,
      showDetail: false,
      form: this.$form.createForm(this),
      loading: false,
      type: '',
      dataSource: [],
      seasonList: [],
      sampleCode: '',
      xlList: [],
      showDetail:false,
      showPrint:false,
      brandList: [],
      dict: {},
      billNo: '',
      scseason: undefined,
      brandName: undefined,
      designName:'',
      brand: '',
      xlName: undefined,
      ifShowButton:true,
      xl: '',
      pagination: {
        total: 0,
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30', '40'],
        showQuickJumper: true,
        showSizeChanger: true,
        showTotal: total => `共 ${total} 条记录`,
        itemRender: (current, type, originalElement) => {
          if (type === 'prev') {
            return <a>上一页</a>
          } else if (type === 'next') {
            return <a>下一页</a>
          }
          return originalElement
        }
      }
    }
  },
  created(){
    let pathname = window.location.href
    let pathArr = pathname.split('/')
    if(pathArr.includes('noButton')){
      this.ifShowButton = false
    }
  },
  mounted() {
    this.loadData()
    this.getSeasonList()
    this.getBrandList()
    this.getXlList()
  },
  computed: {
    userInfo() {
      return this.$store.getters.userInfo || null
    }
  },
  methods: {
    close() {
      this.showAdd = false
      this.loadData(1)
    },
    add(record) {
      // this.showAdd = true
      this.$router.push({ path: 'add', query: { id: record.id ,billNo:record.billNo,sampleCode: record.sampleCode,brand:record.brand,xl:record.xl} })
      this.content = record
    },
    toTem(record){
      this.$router.push({ path: '/rd/billTemplate/create', query: { id: record.id,type:1} })
      this.content = record
    },
    todetail(record){
      // this.showDetail = true
      this.$router.push({ path: '/rd/bill/detail', query: { id: record.id,sampleCode: record.sampleCode,billNo:record.billNo,brand:record.brand,xl:record.xl} })
      this.content = record
    },
    closeDetail(){
      this.showDetail = false
    },
    closePrint(){
      this.showPrint = false
    },
    changeBrand(values) {
      if (values) {
        this.brandList.map(item => {
          if (item.name == this.brandName) {
            this.brand = item.code
          }
        })
      } else {
        this.brand = ''
      }
    },
    changeXl(values) {
      if (values) {
        this.xlList.map(item => {
          if (item.name == this.xlName) {
            this.xl = item.code
          }
        })
      } else {
        this.xl = ''
      }
    },
    handleTableChange(pagination) {
      this.pagination = pagination
      sessionStorage.setItem('current', this.pagination.current)
      this.loadData()
    },
    async getSeasonList() {
      const params = {
        name: 'SEASON'
      }
      try {
        const res = await getDictChildList('dict', params)
        if (res.code == 200) {
          this.seasonList = res.data
        } else {
          if (res.msg) {
            this.$message.error(res.msg)
          } else {
            this.$message.error('获取上货季列表失败！')
          }
        }
      } catch (error) {
        this.$message.error('获取上货季列表失败！')
      }
    },
    async getBrandList() {
      const params = {
        name: 'BRAND'
      }
      try {
        const res = await getDictChildList('dict', params)
        if (res.code == 200) {
          this.brandList = res.data
        } else {
          if (res.msg) {
            this.$message.error(res.msg)
          } else {
            this.$message.error('获取品牌列表失败！')
          }
        }
      } catch (error) {
        this.$message.error('获取品牌列表失败！')
      }
    },

    async getXlList() {
      const params = {
        name: 'XL'
      }
      try {
        const res = await getDictChildList('dict', params)
        if (res.code == 200) {
          this.xlList = res.data
          console.log(this.xlList);
        } else {
          if (res.msg) {
            this.$message.error(res.msg)
          } else {
            this.$message.error('获取小类列表失败！')
          }
        }
      } catch (error) {
        this.$message.error('获取小类列表失败！')
      }
    },
    print(record) {
      // this.$message.error('开发中')
      // this.showPrint = true
      this.id = record.id
      this.$router.push({ path: '/rd/print', query: { id: record.id ,sampleCode: record.sampleCode,brand:record.brand,xl:record.xl} })
    },
    tosize(record){
      this.$router.push({ path: '/rd/size', query: { sampleCode: record.sampleCode ,id: record.id,billNo:record.billNo,brand:record.brand,xl:record.xl} })
    },
    async deleteRecord(record) {
      const params = {
        id: record.id
      }
      const { realname } = this.userInfo
      params.operator = realname
      try {
        const res = await deleteList('bill', params)
        if (res.code == 200) {
          this.$message.success('删除工艺单成功！')
          this.loadData()
        } else {
          this.$message.error(res.msg)
        }
      } catch (error) {
        this.$message.error('删除失败！')
      }
    },
    async getDetail(record) {
      const params = {
        id: record.id
      }
      try {
        const res = await getDetailList('bill', params)
        if (res.code == 200) {
          this.submitBill(res.data)
        } else {
          if (res.msg) {
            this.$message.error(res.msg)
          } else {
            this.$message.error('获取工艺单详情失败！')
          }
        }
      } catch (error) {
        this.$message.error('获取工艺单详情失败！')
      }
    },
    async submitBill(record) {
      const params = {
        id: record.id,
        status: 1,
        craftBillPart: record.craftBillPartVos,
        craftBillTemplate: record.craftBillTemplateVos
      }
      const { realname } = this.userInfo
      params.operator = realname
      try {
        const res = await changeStatus('bill', params)
        if (res.code == 200) {
          this.$message.success('提交工艺单成功！')
          this.loadData()
        } else {
          this.$message.error(res.msg)
        }
      } catch (error) {
        this.$message.error('提交失败！')
      }
    },

    async backsubmit(record) {
      const params = {
        id: record.id,
        status: 0
      }
      const { realname } = this.userInfo
      params.operator = realname
      try {
        const res = await changeStatus('bill', params)
        if (res.code == 200) {
          this.$message.success('反提交工艺单成功！')
          this.loadData()
        } else {
          this.$message.error(res.msg)
        }
      } catch (error) {
        this.$message.error('提交失败！')
      }
    },
    handleSubmit(e) {
      e.preventDefault()
      this.loadData(1)
    },
    async loadData(key) {
      if(sessionStorage.getItem('current')){
        this.pagination.current = Number(sessionStorage.getItem('current'))
      }
      this.loading = true
      if (key) {
        this.pagination.current = 1
      }
      const params = {
        current: this.pagination.current,
        size: this.pagination.pageSize
      }
      if(!this.ifShowButton){
        params.bc = '会后齐码'
        params.status = 1
      }
      if (this.billNo) {
        params.billNo = this.billNo
      }
      if(this.designName){
        params.designName = this.designName
      }
      if (this.scseason) {
        params.scseason = this.scseason
      }
      if (this.brand) {
        params.brand = this.brand
      }
      if (this.xl) {
        params.xl = this.xl
      }
      if (this.sampleCode) {
        params.sampleCode = this.sampleCode.toUpperCase()
      }
       params.isTemp = 'N'
      try {
        const res = await getList('bill', params)
        if (res.code == 200) {
          this.dataSource = res.data.records
          this.pagination.total = res.data.total
        } else {
          if (res.msg) {
            this.$message.error(res.msg)
          } else {
            this.$message.error('获取工艺单列表失败！')
          }
        }
      } catch (error) {
        this.$message.error('获取工艺单列表失败！')
      } finally {
        this.loading = false
      }
    }
  }
}
</script>
<style lang="less" scoped>
.background {
  background: transparent;
}
.ant-modal-body {
  display: flex;
  justify-content: space-between;
}
</style>
<style>
.table .table-color {
  color: #0cce88;;
}
</style>
